<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>IE6,7,8渐变兼容</title>
        <style>
            #myElement {
                width:700px;
                height: 267px;
                border-radius:6px;
                box-shadow:10px 10px 10px 5px rgba(0,0,0,.6);
                background: url(img/tourism1.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
                background: url(img/tourism1.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
                background: url(img/tourism1.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
                background: url(img/tourism1.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
                background: url(img/tourism1.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
                background: url(img/tourism1.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
                background: url(img/tourism1.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
                -pie-background: url(img/tourism1.png) no-repeat, linear-gradient(#CCC, rgba(255,255,255,.5)); /*PIE 支持*/
                /*-pie-background:rgba(0,0,0,.6);*//*PIE 支持*/
                -webkit-background-size: contain;
                background-size: contain;
                behavior: url(asserts/ie/PIE.htc);
            }
        </style>
    </head>
    <body>
        <div id="myElement">PIE</div>
    </body>
</html>